<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style></style>
  </head>
  <body>
    <!-- 主体区域 -->
    <section id="todoapp">
      <!-- 输入框 -->
      <header class="header">
        <h1>todo-List</h1>
        <input
          v-model="inputValue"
          @keyup.enter="add"
          autofocus="autofocus"
          autocomplete="off"
          placeholder="请输入任务"
          class="new-todo"
        />
      </header>
      <!-- 列表区域 -->
      <section class="main">
        <ul class="todo-list">
          <li class="to" v-for="(item,index) in list">
            <div class="view">
              <span class="index">{{index+1}}.</span>
              <label>{{item}}</label>
              <button class="destroy" @click="remove(index)">删除</button>
            </div>
          </li>
        </ul>
      </section>
      <!-- 统计和清空 -->
      <footer class="footer" v-show="list.length!=0">
        <span class="todo-count" v-if="list.length!=0">
          <strong>{{list.length}}</strong>items left
        </span>
        <button v-show="list.length!=0" class="clear-completed" @click="clear">
          Clear
        </button>
      </footer>
    </section>
    <script src="../lib/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#todoapp',
        data: {
          list: ['aaa', 'bbb', 'ccc'],
          inputValue: 'xxx',
        },
        methods: {
          add: function () {
            this.list.push(this.inputValue)
          },
          remove: function (index) {
            console.log('删除')
            console.log(index)
            this.list.splice(index, 1)
          },
          clear: function () {
            this.list = []
          },
        },
      })
      // var STORAGE_KEY = 'todos-vuejs-2.0'
      // var todoStorage = {
      //   fetch: function () {
      //     var todos = JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]')
      //     todos.forEach(function (todo, index) {
      //       todo.id = index
      //     })
      //     todoStorage.uid = todos.length
      //     return todos
      //   },
      //   save: function (todos) {
      //     localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))
      //   },
      // }

      // var filters = {
      //   all: function (todos) {
      //     return todos
      //   },
      //   active: function (todos) {
      //     return todos.filter(function (todo) {
      //       return !todo.completed
      //     })
      //   },
      //   completed: function (todos) {
      //     return todos.filter(function (todo) {
      //       return todo.completed
      //     })
      //   },
      // }

      // let app = new Vue({
      //   data: {
      //     todos: todoStorage.fetch(),
      //     newTodo: '',
      //     editedTodo: null,
      //     visibility: 'all',
      //   },
      //   watch: {
      //     todos: {
      //       handler: function (todos) {
      //         todoStorage.save(todos)
      //       },
      //       deep: true,
      //     },
      //   },
      //   computed: {
      //     filteredTodos: function () {
      //       return filters[this.visibility](this.todos)
      //     },
      //     remaining: function () {
      //       return filters.active(this.todos).length
      //     },
      //     allDone: {
      //       get: function () {
      //         return this.remaining === 0
      //       },
      //       set: function (value) {
      //         this.todos.forEach(function (todo) {
      //           todo.completed = value
      //         })
      //       },
      //     },
      //   },
      //   filters: {
      //     pluralize: function (n) {
      //       return n === 1 ? 'item' : 'items'
      //     },
      //   },
      //   methods: {
      //     addTodo: function () {
      //       var value = this.newTodo && this.newTodo.trim()
      //       if (!value) {
      //         return
      //       }
      //       this.todos.push({
      //         id: todoStorage.uid++,
      //         title: value,
      //         completed: false,
      //       })
      //       this.newTodo = ''
      //     },
      //     removeTodo: function (todo) {
      //       this.todos.splice(this.todos.indexOf(todo), 1)
      //     },
      //     editTodo: function (todo) {
      //       this.beforeEditCache = todo.title
      //       this.editedTodo = todo
      //     },
      //     doneEdit: function (todo) {
      //       if (!this.editedTodo) {
      //         return
      //       }
      //       this.editedTodo = null
      //       todo.title = todo.title.trim()
      //       if (!todo.title) {
      //         this.removeTodo(todo)
      //       }
      //     },

      //     cancelEdit: function (todo) {
      //       this.editedTodo = null
      //       todo.title = this.beforeEditCache
      //     },

      //     removeCompleted: function () {
      //       this.todos.filters.active(this.todos)
      //     },
      //   },

      //   directives: {
      //     'todo-focus': function (el, binding) {
      //       if (binding.value) {
      //         el.focus()
      //       }
      //     },
      //   },
      // })

      // function onHashChange() {
      //   var visibility = window.location.hash.replace(/#\/?/, '')
      //   if (filters[visibility]) {
      //     app.visibility = visibility
      //   } else {
      //     window.location.hash = ''
      //     app.visibility = 'all'
      //   }
      // }
      // window.addEventListener('hashchange', onHashChange)
      // onHashChange()

      // app.$mount('.todoapp')
    </script>
  </body>
</html>
